$ var pageTitle = "Marko Templating Engine";
$ var currentPage = "home";
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>${pageTitle}</title>
    </head>
    <body>
        <h1>${pageTitle}</h1>
        <p>
            Marko is a <i>fast</i> and lightweight templating engine that
            compiles templates to CommonJS modules and supports streaming, async
            rendering and custom tags. It supports both a familiar HTML syntax
            and a concise, indentation-based syntax.
        </p>
        <ul.features>
            <for|feature| of=["async", "streaming", "custom-tags", "readable", "modules"]>
                <li>${feature}</li>
            </for>
        </ul>
        <if(input.colors && input.colors.length)>
            <ul>
                <for|color| of=input.colors>
                    <li>${color}</li>
                </for>
            </ul>
        </if>
        <else>
            <div>No colors!</div>
        </else>
        <tabs>
            <@tab title="Tab 1">Body content for Tab 1</@tab>
            <@tab title="Tab 2">Body content for Tab 2</@tab>
        </tabs>
        <script type="text/javascript">
        if (foo) {
            alert('Marko is awesome!');
        }
        </script>
        <macro|macroInput| name="navLink">
            $ var id = macroInput.id;
            $ var href = macroInput.href;
            $ var title = macroInput.title;
            <li>
                <a.nav-link class=(id === currentPage && "active") href=href>
                    ${title}
                </a>
            </li>
        </macro>
        <ul>
            <navLink id="home" href="/" title="Home"/>
            <navLink id="docs" href="/docs" title="Docs"/>
            <navLink id="blog" href="/blog" title="Blog"/>
        </ul>
    </body>
</html>